<template>
  <v-row no-gutters justify="center" class="mx-auto" style="max-width:1200px;">
    <v-col lg="8"
      ><v-card
        v-for="(item, index) in articleList"
        :key="index"
        color="#385F73"
        dark
        class="mb-6"
      >
        <v-row align="center">
          <v-col lg="9">
            <v-card-title class="headline">Unlimited music now</v-card-title>
            <v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
            <v-card-actions>
              <v-btn text @click="toArticleInfo(item)">阅读详情</v-btn>
            </v-card-actions>
          </v-col>
          <v-col>
            <v-img
              src="https://pic.downk.cc/item/5d36dae1451253d1789d583d.jpg"
              class="mr-5"
              :aspect-ratio="16 / 9"
              @click="$router.push('/')"
            />
          </v-col>
        </v-row>
      </v-card>
    </v-col>
    <v-col lg="4" class="pl-8 hidden-md-and-down">
      <v-card>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="title">
              Application
            </v-list-item-title>
            <v-list-item-subtitle>
              subtext
            </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <v-divider></v-divider>

        <v-list dense nav>
          <v-list-item v-for="item in items" :key="item.title" link>
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  data: () => ({
    articleList: [
      {
        action: '15 min',
        headline: 'Brunch this weekend?',
        title: 'Ali Connors',
        subtitle:
          "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
      },
      {
        action: '2 hr',
        headline: 'Summer BBQ',
        title: 'me, Scrott, Jennifer',
        subtitle: "Wish I could come, but I'm out of town this weekend."
      },
      {
        action: '6 hr',
        headline: 'Oui oui',
        title: 'Sandra Adams',
        subtitle: 'Do you have Paris recommendations? Have you ever been?'
      },
      {
        action: '12 hr',
        headline: 'Birthday gift',
        title: 'Trevor Hansen',
        subtitle:
          'Have any ideas about what we should get Heidi for her birthday?'
      },
      {
        action: '18hr',
        headline: 'Recipe to try',
        title: 'Britta Holt',
        subtitle:
          'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
      }
    ],
    items: [
      { title: 'Dashboard', icon: 'mdi-view-dashboard' },
      { title: 'Photos', icon: 'mdi-image' },
      { title: 'About', icon: 'mdi-help-box' }
    ]
  }),
  methods: {
    toArticleInfo(val) {
      console.log('toArticleInfo -> val', val)
      this.$router.push('article')
    }
  }
}
</script>
